<template>
  <div>
    <div v-if="!qrCodeUrl">
      <el-form :model="form" label-width="130px" ref="form" class="pad-t-10">
        <el-form-item label="任务酬金：" prop="amount"><span class="font-red font-18">{{ taskDetail.budgetAmount }}</span></el-form-item>
        <el-form-item label="手续费：" prop="chargeAmount"><span class="font-red font-18">{{ taskDetail.chargeAmount }}</span></el-form-item>
        <el-form-item label="支付方式：" prop="paymentType">
          <div class="radio-bar">
            <el-radio-group v-model="form.paymentType" @change="paymentTypeChange(form.paymentType)">
              <div v-for="type in paymentTypes" class="mar-b-10">
                <el-radio :label="type.key">
                  <div class="radio-border">
                    <svg-icon :class="type.icon" :icon-class="type.icon" />
                    <span class="radio-txt">{{type.value}}</span>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="financeTaskClose">取消</el-button>
        <el-button type="primary" @click="confirmPayment">确认打款</el-button>
      </div>
    </div>
    <div v-if="qrCodeUrl" class="align-c">
      <img :src="qrCodeUrl" style="width: 300px; height: 300px" />
    </div>
  </div>
</template>

<style scoped>
.svg-icon{
  margin-right: 6px;

}
.wechatRadius{
  font-size: 26px;
}
.alipay{
  font-size: 60px;
  height: 30px;
}
.radio-txt{
  vertical-align: top;
  display: inline-block;
  padding-top: 6px;
}
.radio-border{
  border:#ccc 1px solid;
  vertical-align: middle;
  display: inline-block;
  padding: 5px 10px;
  width: 150px;
  height: 40px;
}
</style>

<script>
  import { confirmPayment, paymentAppendScan, checkPayment, getTaskDetailDTO } from '@/api/project/taskCommission'
  import QRCode from 'qrcode'

  export default {
    props: {
      // 任务id
      taskId: {
        type: String
      },
      // 追加酬金ID
      taskCommissionId: {
        type: String
      }
    },
    data() {
      return {
        qrCodeUrl: '',
        financeTitle: null,
        taskDetail: {},
        form: {
          taskName: '',
          remunerationType: '1',
          paymentType: '3',
          chargeAmount: 0
        },
        paymentTypes: [
          { key: '3', value: '微信支付', icon: 'wechatRadius' },
          { key: '4', value: '支付宝', icon: 'alipay' }
        ],
        payStatus: [
          { value: '1', label: '发布托管酬金' },
          { value: '2', label: '任务追加酬金' }
        ]
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initTaskDetial()
    },
    methods: {
      initTaskDetial() {
        getTaskDetailDTO(this.taskId).then(response => {
          if (response.isError) return
          this.taskDetail = response.data
        })
      },
      // 确认打款
      confirmPayment() {
        if (this.taskCommissionId === '' || this.taskCommissionId === null) {
          // 追加酬金打款
          const that = this
          paymentAppendScan({
            taskName: this.taskDetail.taskName,
            payType: this.form.paymentType + '2',
            taskCommissionId: this.taskCommissionId,
            appendAmount: this.amount
          }).then(response => {
            if (response.isError) return
            QRCode.toDataURL(response.data.resultData)
              .then(url => {
                that.qrCodeUrl = url
                that.handlePayByQRCode(that.taskCommissionId, 2)
              })
              .catch(err => {
                console.error(err)
              })
            // this.$bus.$emit('FinanceTaskPayment')
          })
        } else {
          // 项目托管 打款
          this.taskDetail.paymentType = this.form.paymentType + '1'
          const details = {
            paymentType: this.form.paymentType + '1',
            taskId: this.taskId
          }
          const that = this
          confirmPayment(details).then(response => {
            if (response.isError) return
            QRCode.toDataURL(response.data.resultData)
              .then(url => {
                that.qrCodeUrl = url
                that.handlePayByQRCode(that.taskId, 1)
              })
              .catch(err => {
                console.error(err)
              })
            // this.$bus.$emit('FinanceTaskPayment')
          })
        }
      },
      // 扫码支付检测后台是否支付成功
      handlePayByQRCode(id, confirmType) {
        const that = this
        setTimeout(() => {
          checkPayment(id, confirmType).then(response => {
            if (response.isError) return
            if (response.data === 1) {
              // 已支付，刷新页面
              this.$message({
                type: 'success',
                message: '支付成功!'
              })
              that.$bus.$emit('FinanceTaskPayment')
            } else {
              that.handlePayByQRCode(id, confirmType)
            }
          })
        }, 5000)
      },
      financeTaskClose() {
        this.$bus.$emit('FinanceTaskPayment', null)
      },
      // 更新支付方式
      paymentTypeChange(paymentType) {
      }
    },
    mounted() {
    }
  }
</script>
